<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="plugin/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="plugin/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/table.css">

</head>

<body style="background-color: #e6ecf5;min-width: 1100px">
    <main class="main">
        <!--头部-->
        <header class="heared">
            <span class="head-logo">新能源智能环境管理系统</span>
            <ul class="head-ul">
                <li><a href="home.html">首页</a> </li>
                <li><a href="videlctr.html">视频监控</a> </li>
                <li><a href="https://dingkeke.cn/hgr/index.html" target="_blank">环境监测</a> </li>
                <li><a href="static.html">统计分析</a> </li>
                <li><a href="form.html">表单信息</a> </li>
                <li><a href="user.html" class="active-a">用户管理</a></li>
                <li><a href="part.html">部门管理</a></li>
                <li><a href="date.html">日程管理</a></li>

            </ul>
            <div class="head-right"><span id="time"></span><span>Admin</span></div>
        </header>
        <!--身体-->
        <section class="section">


            <div class="l_left news_left">

                <h6>部门目录</h6>
                <div class="tree_left_top">
                    <div class=" order_ztree l_left organize_ztree" style="width: 100%">
                        <p>
                        <ul id="treeDemo" class="ztree" style=" overflow:auto;margin-left: 20px"></ul>
                        </p>
                    </div>
                </div>
            </div>
            <div class="l_left news_right">
                <h6>用户管理</h6>

                <div class="notice_check">
                    <div class="btn-group l_left" style="margin-right: 4px">
                        <button type="button" class="btn btn-default change"
                            style="height: 30px;line-height: 30px;padding: 0 12px !important;font-size: 12px">选择条件</button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" style="height: 30px;line-height: 30px">
                            <span class="caret"></span>
                            <span class="sr-only"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>部门名称</li>
                            <li>部门编号</li>
                            <li>负责人</li>
                            <li>电话号</li>
                            <li>分机号</li>
                        </ul>
                    </div>
                    <div class="l_left">
                        <input type="text" class="find_input">

                    </div>
                    <button class="check_btn">查询</button>
                    <div class="notice_nav r_right">
                        <a class="btn btn-default" onclick="addUser()"><span
                                class="glyphicon glyphicon-plus"></span>新增</a>
                        <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>
                        <a class="btn btn-default" onclick="addUser()"><span
                                class="glyphicon glyphicon-pencil"></span>编辑</a>
                        <a class="btn btn-default" onclick="reset_password()"><span
                                class="glyphicon glyphicon-lock"></span>重置密码</a>
                    </div>
                    <div class="clear"></div>
                </div>
                <ul class="news_table department_table">
                    <li>
                        <table id="table" class="table_style" style="margin: 0 auto"></table>
                    </li>
                </ul>

            </div>
            <div class="clear"></div>

        </section>

    </main>
    <script src="js/jquery.js"></script>
    <script src="plugin/bstable/js/bootstrap.min.js"></script>
    <script src="plugin/bstable/js/bootstrap-table.js"></script>
    <script src="plugin/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="plugin/ztree/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="plugin/ztree/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="plugin/ztree/jquery.ztree.exedit-3.5.js"></script>
    <script src="plugin/layer_v2.1/layer/layer.js"></script>
    <script src="js/organize.js"></script>

    <script>
        $(function () {
            $(".head-ul li a").click(function () {
                $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
                $(this).parents('li').find("ul").show();
                $(this).parents("li").sibling().find("ul").hide();

            })
            $('#table').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/user.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                columns: [
                    {
                        checkbox: "true",
                        field: 'check',
                        align: 'center',
                        valign: 'middle'
                    }
                    ,
                    {
                        title: "用户名",
                        field: 'id',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '性别',
                        field: 'sex',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '年龄',
                        field: 'date',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '部门',
                        field: 'person',
                        align: 'center'
                    },
                    {
                        title: '职位',
                        field: 'oper',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '角色',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '备注',
                        field: 'person',
                        align: 'center'
                    }
                ]
            });
            getTime();
        })
        //    格式化时间
        function getTime() {
            var day = new Date();
            var year = day.getFullYear();
            var moutth = day.getMonth() + 1;
            var date = day.getDate();
            var hour = day.getHours();
            var min = day.getMinutes();
            var sec = day.getSeconds();
            var str = year + '-' + moutth + '-' + date + ' ' + hour + ":" + min + ':' + sec;
            $("#time").text(str);
        }
    </script>
</body>

</html>